<template>
  <view class="container" @click="handleClick">
    <view class="body">
      <view class="avatar-container">
        <img :src="data.avatar" class="avatar"/>
        <view class="text-container">
          <view class="header">
            <text class="user-name">{{ data.userName }}</text>
            <text class="create-time">{{ data.createDateTime }}</text>
          </view>

          <view class="note-item">
            <text class="note-label">{{ note.workNote }}:</text>
            <view class="text-overflow">{{ data.workContext.text }}</view>
          </view>

          <view class="note-item">
            <text class="note-label">{{ note.planNote }}:</text>
            <view class="text-overflow">{{ data.planContext.text }}</view>
          </view>

          <view class="note-item">
            <text class="note-label">{{ note.otherNote }}:</text>
            <view class="text-overflow">{{ data.otherContext.text }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    note: {
      type: Object,
      require: true,
      validator(value) {
        return typeof value.workNote === 'string' && typeof value.planNote === 'string' && typeof value.otherNote === 'string';
      }
    },
    receive: {
      type: Number,
      require: true,
      default: 0
    },
    data: {
      type: Object,
      require: true
    }
  },
  methods: {
    handleClick() {
      uni.setStorageSync('reportDetail', {data: this.data, note: this.note});
      uni.navigateTo({
        url: '/pages/tab2/record/report-detail'
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 变量
$avatar-size: 100rpx;
$avatar-border-radius: 10rpx;
$font-size-large: 40rpx;
$font-size-medium: 30rpx;
$font-size-small: 25rpx;
$margin-large: 20rpx;
$margin-small: 10rpx;
$background-color: skyblue;
$text-color-gray: #ccc;

// 通用样式
.container {
  border-radius: 20rpx;
  background-color: #fff;
  margin: $margin-large;
}

.body {
  padding: $margin-small;
  margin: $margin-small;
}

.avatar-container {
  display: flex;
  padding: $margin-small;
}

.avatar {
  height: $avatar-size;
  width: $avatar-size;
  border-radius: $avatar-border-radius;
  margin: $margin-small;
  background-color: $background-color;
}

.text-container {
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  width: 70vw;
  align-items: center;
}

.user-name {
  font-size: $font-size-large;
}

.create-time {
  font-size: $font-size-medium;
  color: $text-color-gray;
}

.note-item {
  display: flex;
  align-items: center;
}

.note-label {
  font-size: $font-size-small;
  color: $text-color-gray;
  margin-right: $margin-small;
}

.text-overflow {
  font-size: $font-size-small;
  margin-left: $margin-small;
  overflow: hidden;
  width: 300rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.scroll-view-item {
  height: 200rpx;
}

.line {
  height: 1px;
  background-color: #ccc;
  margin: $margin-small 0;
}
</style>
